<template>
    <div class="center-container">
        <div class="title">
            <span>各部门稿件数量统计</span>
        </div>
        <div class="table-container">
            <div class="main">
                <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                    <el-tab-pane label="已发布" name="first">
                        <el-button @click="handleClickPublished" type="primary" style="margin-right: 10px;">检索</el-button>
                        <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" style="width: auto; margin-bottom: 10px;">
                        </el-date-picker>
                        <el-table :data="publishedTable" border strip style="margin-bottom:20px; width:100%">
                            <el-table-column prop="name" label="部门名称">
                            </el-table-column>
                            <el-table-column prop="articleCount" label="已发布稿件数量">
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="未发布" name="second">
                        <el-button @click="handleClickUnpublished" type="primary" style="margin-right: 10px;">检索</el-button>
                        <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" style="width: auto; margin-bottom: 10px;">
                        </el-date-picker>
                        <el-table :data="unpublishedTable" border strip style="margin-bottom:20px; width:100%">
                            <el-table-column prop="name" label="部门名称">
                            </el-table-column>
                            <el-table-column prop="articleCount" label="未发布稿件数量">
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="已拒绝" name="third">
                        <el-button @click="handleClickRejected" type="primary" style="margin-right: 10px;">检索</el-button>
                        <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" style="width: auto; margin-bottom: 10px;">
                        </el-date-picker>
                        <el-table :data="rejectedTable" border strip style="margin-bottom:20px; width:100%">
                            <el-table-column prop="name" label="部门名称">
                            </el-table-column>
                            <el-table-column prop="articleCount" label="已拒绝稿件数量">
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="总数量" name="fourth">
                        <el-button @click="handleClickTotal" type="primary" style="margin-right: 10px;">检索</el-button>
                        <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" style="width: auto; margin-bottom: 10px;">
                        </el-date-picker>
                        <el-table :data="totalTable" border strip style="margin-bottom:20px; width:100%">
                            <el-table-column prop="name" label="部门名称">
                            </el-table-column>
                            <el-table-column prop="articleCount" label="总数量">
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </div>

        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data() {
        return {
            publishedTable: [],
            unpublishedTable: [],
            rejectedTable: [],
            totalTable: [],
            activeName: 'first',
            value1: [],
        }
    },
    mounted() {
        this.fetchPublished();
        this.fetchTotal();
        this.fetchUnpublished();
        this.fetchRejected();
    },
    methods: {
        formatDate(date) {
            const year = date.getFullYear();
            const month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份从0开始，所以需要+1  
            const day = ('0' + date.getDate()).slice(-2);
            return `${year}-${month}-${day}`;
        },
        //获取已发布稿件数量
        fetchPublished() {
            axios.get('/article/countDeArtPub')
                .then(response => {
                    // 检查响应数据的结构
                    if (Array.isArray(response.data.data)) {
                        this.publishedTable = response.data.data;
                    } else {
                        console.error('Invalid response format:', response.data);
                    }
                })
                .catch(error => {
                    console.error('Error fetching departments:', error);
                    this.publishedTable = [];
                });
        },
        handleClickPublished() {
            console.log("Clicked! Start Date:", this.value1[0], "End Date:", this.value1[1]);
            // 获取开始日期和结束日期，并转换为 YYYY-MM-DD 格式  
            const startDate = this.formatDate(this.value1[0]);
            const endDate = this.formatDate(this.value1[1]);
            // 构造请求体数据
            const requestData = {
                "startDate": startDate,
                "endDate": endDate
            };
            console.log("requestData", requestData);
            // 发送异步 POST 请求获取数据  
            axios.post('/article/countArtPubUserTim', requestData)
                .then(response => {
                    // 更新已发布稿件表格数据  
                    this.publishedTable = response.data.data;
                })
                .catch(error => {
                    console.log("Error fetching data:", error); // 打印整个错误对象  
                    console.log("Error response:", error.response); // 如果存在，打印响应体  
                    console.log("Error message:", error.message); // 打印错误消息  
                    // ... 其他错误处理逻辑  
                });
        },
        //获取未发布稿件数量
        fetchUnpublished() {
            axios.get('/article/countDeArtUnPub')
                .then(response => {
                    // 检查响应数据的结构
                    if (Array.isArray(response.data.data)) {
                        this.unpublishedTable = response.data.data;
                    } else {
                        console.error('Invalid response format:', response.data);
                    }
                })
                .catch(error => {
                    console.error('Error fetching departments:', error);
                    this.unpublishedTable = [];
                });
        },
        handleClickUnpublished() {
            console.log("Clicked! Start Date:", this.value1[0], "End Date:", this.value1[1]);
            // 获取开始日期和结束日期，并转换为 YYYY-MM-DD 格式  
            const startDate = this.formatDate(this.value1[0]);
            const endDate = this.formatDate(this.value1[1]);
            // 构造请求体数据
            const requestData = {
                "startDate": startDate,
                "endDate": endDate
            };
            console.log("requestData", requestData);
            // 发送异步 POST 请求获取数据  
            axios.get('/article/countDeArtUnPub', requestData)
                .then(response => {
                    // 更新已发布稿件表格数据  
                    this.unpublishedTable = response.data.data;
                })
                .catch(error => {
                    console.log("Error fetching data:", error); // 打印整个错误对象  
                    console.log("Error response:", error.response); // 如果存在，打印响应体  
                    console.log("Error message:", error.message); // 打印错误消息  
                });
        },
        //获取已拒绝稿件数量
        fetchRejected() {
            axios.get('/article/countDeArtRefus')
                .then(response => {
                    // 检查响应数据的结构
                    if (Array.isArray(response.data.data)) {
                        this.rejectedTable = response.data.data;
                    } else {
                        console.error('Invalid response format:', response.data);
                    }
                })
                .catch(error => {
                    console.error('Error fetching departments:', error);
                    this.rejectedTable = [];
                });
        },
        handleClickRejected() {
            console.log("Clicked! Start Date:", this.value1[0], "End Date:", this.value1[1]);
            // 获取开始日期和结束日期，并转换为 YYYY-MM-DD 格式  
            const startDate = this.formatDate(this.value1[0]);
            const endDate = this.formatDate(this.value1[1]);
            // 构造请求体数据
            const requestData = {
                "startDate": startDate,
                "endDate": endDate
            };
            console.log("requestData", requestData);
            // 发送异步 POST 请求获取数据  
            axios.post('/article/countArtRefusTime', requestData)
                .then(response => {
                    // 更新已发布稿件表格数据  
                    this.rejectedTable = response.data.data;
                })
                .catch(error => {
                    console.log("Error fetching data:", error); // 打印整个错误对象  
                    console.log("Error response:", error.response); // 如果存在，打印响应体  
                    console.log("Error message:", error.message); // 打印错误消息  
                });
        },
        //获取各部门稿件总数量
        fetchTotal() {
            axios.get('/article/countAllArtNum')
                .then(response => {
                    // 检查响应数据的结构
                    if (Array.isArray(response.data.data)) {
                        this.totalTable = response.data.data;
                    } else {
                        console.error('Invalid response format:', response.data);
                    }
                })
                .catch(error => {
                    console.error('Error fetching departments:', error);
                    this.totalTable = [];
                });
        },
        handleClickTotal() {
            console.log("Clicked! Start Date:", this.value1[0], "End Date:", this.value1[1]);
            // 获取开始日期和结束日期，并转换为 YYYY-MM-DD 格式  
            const startDate = this.formatDate(this.value1[0]);
            const endDate = this.formatDate(this.value1[1]);
            // 构造请求体数据
            const requestData = {
                "startDate": startDate,
                "endDate": endDate
            };
            console.log("requestData", requestData);
            // 发送异步 POST 请求获取数据  
            axios.post('/article/countByDepartmentAndTimeRange', requestData)
                .then(response => {
                    // 更新已发布稿件表格数据  
                    this.totalTable = response.data.data;
                })
                .catch(error => {
                    console.log("Error fetching data:", error); // 打印整个错误对象  
                    console.log("Error response:", error.response); // 如果存在，打印响应体  
                    console.log("Error message:", error.message); // 打印错误消息  
                });
        },
    }
}
</script>


<style scoped>
.center-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title {
    font-size: 40px;
    font-family: '500';
    color: black;
    margin-bottom: 30px;
}

.table-container {
    width: 80%;
}

.el-table {
    border: 1px solid #DCDCDC;
    border-collapse: collapse;
}

.el-table__header {
    border-bottom: 1px solid #DCDCDC;
}

.el-table__body {
    border-top: 1px solid #DCDCDC;
}

.el-table__row {
    border-bottom: 1px solid #DCDCDC;
}

.el-table__column {
    border-right: 1px solid #DCDCDC;
}

.el-table__column:last-child {
    border-right: none;
}
</style>
